<template>
  <div class="room">
    <div class="room_header">
      <span>{{ roomName }}的直播间</span>
      <span>{{ userName }}</span>
    </div>
    <div class="room_main">
      <div class="main_left">
        <div class="left_Live">
          <video
            id="local-video"
            autoplay
          />
        </div>
        <div class="left_btn">
          <button
            class="btn_back"
            @click="$router.go(-1)"
          >
            返回
          </button>
          <button
            v-if="type"
            class="btn_startLive"
            @click="startLive"
          >
            开始直播
          </button>
          <button
            v-else
            class="btn_startLive"
          >
            结束直播
          </button>
        </div>
      </div>
      <div class="main_right">
        <div
          v-for="(item, index) in userList"
          :key="index"
        >
          <img
            :src="item.img"
            alt=""
          >
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createRoom, startVideoTalk } from "../../../../utils/websocket";
export default {
  data() {
    return {
      userList: [
        {
          img: "https://p.qqan.com/up/2021-2/16142199549131498.jpg",
          title: "你父亲的直播间",
        },
        {
          img: "https://p.qqan.com/up/2021-2/16142199541400006.jpg",
          title: "单打小王子",
        },
        {
          img: "https://p.qqan.com/up/2021-2/16142199556045027.jpg",
          title: "丢你老母",
        },
        {
          img: "https://p.qqan.com/up/2021-2/16142199543323438.jpg",
          title: "给你嘴巴子",
        },
        {
          img: "https://p.qqan.com/up/2021-2/16142199551531842.jpg",
          title: "薅你双马尾",
        },
        {
          img: "https://p.qqan.com/up/2021-2/16142199554844221.jpg",
          title: "滴蜡油放小球",
        },
      ],
      type: true,
      roomName: "",
      userName: "",
    };
  },
  created() {
    console.log(this.$route, "reote");
    let { roomId, roomName, userName } = this.$route.query;
    (this.roomName = roomName),
      (this.userName = userName),
      createRoom({
        // roomId: new Date().getTime(),
        // roomName: "春季美妆搭配",
        // userName: "马世超",
        roomId: roomId,
        roomName: roomName,
        userName: userName,
        img: "https://p.qqan.com/up/2021-3/16158637679502150.jpg",
      });
  },
  methods: {
    startLive() {
      startVideoTalk();
      this.type = !this.type;
    },
  },
};
</script>

<style lang="scss">
@import "./css/Room.scss";
</style>